<template>
	<view>
		<view class="location-container">
			<view class="location-header">
				<uni-search-bar @input="input" @confirm="search" :focus="true" v-model="searchValue" bgColor="#f2f2f2"
					placeholder="搜索城市"></uni-search-bar>
			</view>
			<view class="location-content">
				<view class="current-location-box">
					<view class="current-locationt-text">当前城市</view>
					<view class="current-location-btn">
						<uni-icons class="current-location-btn-icon" type="location-filled" size="18"></uni-icons>
						<view class="current-location-btn-text">{{localData.data.locationName}}</view>
					</view>
				</view>
				<view class="hot-city-box">
					<view class="hot-city-text">热门城市</view>
					<view class="hot-city-btn-list">
						<uni-row class="demo-uni-row" :width="nvueWidth">
							<uni-col :span="8" v-for="(item, index) in hotCityList.data.list" :key="index">
								<view class="hot-city-btn">
									{{item.cityName}}
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
		</view>
		<view class="citylist">
			<uni-indexed-list :options="city.data.list" :show-select="false" @click="bindClick" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		watch,
		watchEffect,
		getCurrentInstance
	} from 'vue';

	let localData = ref({
		code: 2000,
		msg: "success",
		data: {
			locationName: "北京",
			position: {
				latitude: "39.91059265566227",
				longitude: "116.43445696196046"
			}
		}
	})

	let hotCityList = ref({
		code: 2000,
		msg: "success",
		data: {
			list: [{
					cityId: 1,
					cityName: "北京"
				},
				{
					cityId: 2,
					cityName: "上海"
				},
				{
					cityId: 3,
					cityName: "广州"
				},
				{
					cityId: 4,
					cityName: "深圳"
				},
				{
					cityId: 5,
					cityName: "青岛"
				},
				{
					cityId: 6,
					cityName: "苏州"
				},
				{
					cityId: 7,
					cityName: "重庆"
				},
				{
					cityId: 8,
					cityName: "成都"
				},
				{
					cityId: 9,
					cityName: "杭州"
				},
			]
		}
	})

	let city = ref({
		code: 200,
		msg: "success",
		data: {
			list: [{
					letter: 'A',
					data: ['安阳', '阿坝', '阿克苏', '阿拉善盟', '阿勒泰']
				},
				{
					letter: 'B',
					data: ['北京', '包头', '北海', '北京', '北海']
				},
				{
					letter: 'C',
					data: ['长春', '成都', '重庆', '长沙', '常州']
				},
				{
					letter: 'D',
					data: ['大连', '大庆', '大同', '丹东', '东莞']
				},
				{
					letter: 'E',
					data: ['鄂尔多斯', '恩施', '鄂州', '峨眉山', '恩施']
				},
				{
					letter: 'F',
					data: ['福州', '佛山', '抚顺', '阜阳', '福州']
				},
				{
					letter: 'G',
					data: ['广州', '贵阳', '桂林', '赣州', '广州']
				},
				{
					letter: 'H',
					data: ['杭州', '哈尔滨', '合肥', '海口', '呼和浩特']
				},
				{
					letter: 'I',
					data: []
				},
				{
					letter: 'J',
					data: ['济南', '济宁', '嘉兴', '吉林', '金华']
				},
				{
					letter: 'K',
					data: ['昆明', '克拉玛依', '开封', '昆明', '开封']
				},
				{
					letter: 'L',
					data: ['兰州', '拉萨', '洛阳', '临沂', '柳州']
				},
				{
					letter: 'M',
					data: ['绵阳', '牡丹江', '马鞍山', '茂名', '梅州']
				},
				{
					letter: 'N',
					data: ['南京', '南昌', '南宁', '宁波', '南通']
				},
				{
					letter: 'O',
					data: []
				},
				{
					letter: 'P',
					data: ['平遥', '盘锦', '攀枝花', '平遥', '盘锦']
				},
				{
					letter: 'Q',
					data: ['青岛', '秦皇岛', '齐齐哈尔', '青岛', '秦皇岛']
				},
				{
					letter: 'R',
					data: ['日照', '日喀则', '日照', '日喀则', '日照']
				},
				{
					letter: 'S',
					data: ['上海', '深圳', '苏州', '沈阳', '石家庄']
				},
				{
					letter: 'T',
					data: ['天津', '太原', '唐山', '天津', '太原']
				},
				{
					letter: 'U',
					data: []
				},
				{
					letter: 'V',
					data: []
				},
				{
					letter: 'W',
					data: ['武汉', '无锡', '乌鲁木齐', '威海', '温州']
				},
				{
					letter: 'X',
					data: ['西安', '厦门', '徐州', '西宁', '锡林郭勒']
				},
				{
					letter: 'Y',
					data: ['烟台', '扬州', '银川', '延安', '宜昌']
				},
				{
					letter: 'Z',
					data: ['郑州', '珠海', '株洲', '张家口', '湛江']
				}
			]
		}
	})

	let bindClick = (e) => {
		uni.showToast({
			title: '点击item，返回数据' + JSON.stringify(e),
			icon: 'none'
		})
	}
</script>

<style lang="scss" scoped>
	.location-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #fff;
		color: #333;

		.location-header {
			float: left;
			width: 100%;
			height: 70px;
			box-sizing: border-box;
			padding: 0px 15px;
		}

		.location-content {
			float: left;
			min-height: calc(100vh - 70px);
			height: auto;
			width: 100%;
			box-sizing: border-box;
			padding: 0px 25px;

			.current-location-box {
				width: 100%;
				height: 60px;
				float: left;
				box-sizing: border-box;

				.current-locationt-text {
					width: 100%;
					height: 30px;
					font-size: 14px;
				}

				.current-location-btn {
					width: 93px;
					height: 30px;
					float: left;
					line-height: 30px;
					font-size: 12px;
					background: #fff0f0;
					border-radius: 4px;

					.current-location-btn-icon {
						line-height: 30px;
						float: left;
						margin-left: 25px;
					}

					.current-location-btn-text {
						line-height: 30px;
						float: left;
						line-height: 30px;
					}
				}
			}

			.hot-city-box {
				width: 100%;
				height: auto;
				margin-top: 30px;
				float: left;
				box-sizing: border-box;

				.hot-city-text {
					width: 100%;
					height: 30px;
					font-size: 14px;
				}

				.hot-city-btn-list {
					width: 100%;
					height: auto;
					float: left;

					.hot-city-btn {
						width: 93px;
						height: 30px;
						float: left;
						line-height: 30px;
						font-size: 12px;
						background: #fff0f0;
						border-radius: 4px;
						margin-bottom: 20px;
						text-align: center;
					}
				}
			}
		}
	}


	.citylist {
		position: fixed;
		bottom: 0px;
		height: 50vh;
		width: 100%;
	}
</style>